<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello Vue</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet" />
</head>
<body>
  <div id="app" class="w-80 mx-auto">
    <h1 v-cloak class="mt-10 text-green-500 text-4xl text-center">{{msg}}</h1>
    <model></model>
    <model-demo></model-demo>
    <custom-directives></custom-directives>
  </div>

  <script>
    const { createApp, defineComponent } = Vue

    // Panel Component
    const Panel = defineComponent({
      props: {
        title: {
          type: String,
          required: false,
          default: '',
        },
      },
      template: `
          <div class="flex flex-col my-4 px-8 pb-8 pt-4  bg-gray-100  rounded shadow-inner">
            <h1 class="mb-2  text-xl text-green-500 border-b-2 border-green-200">{{title}}</h1>
            <slot></slot>
          </div>
        `,
    })

    // Button Component
    const TButton = defineComponent({
      props: {
        size: {
          type: String,
          required: false,
          default: 'med',
        },
      },
      data: () => ({
        sizeClasslist: '',
      }),
      methods: {
        handleSize() {
          switch (this.size) {
            case 'sm':
              this.sizeClasslist = 'px-2 text-sm'
              break
            case 'lg':
              this.sizeClasslist = 'px-8 py-4 text-2xl'
              break
            default:
              this.sizeClasslist = 'px-4 py-2 text-base'
              break
          }
        },
      },
      created() {
        this.handleSize()
      },
      template: `
          <button
            class="inline-flex items-center  border border-green-400 leading-6 font-medium rounded-md text-green-800 bg-white hover:text-green-500 focus:border-green-300 focus:ring focus:ring-green-200 focus:outline-none active:bg-green-700  transition ease-in-out duration-150"
            :class="sizeClasslist"
          ><slot></slot></button>
        `,
    })

    // 双向绑定 v-model
    const Model = defineComponent({
      components: {
        panel: Panel
      },

      data: () => ({
        value: ""
      }),

      template: `
          <panel title="双向绑定">
          <div class="text-center py-2 text-red-400">{{value}}</div>
          <div class="flex items-center mb-2">
            <div class="flex-1">v-model</div>
            <input
              class="p-2 ml-2 text-sm border-gray-400 border-2 rounded"
              type="text" 
              v-model="value" 
            />
          </div>
          <div class="flex items-center mb-2">
            <div class="flex-1">.lazy</div>
            <input
              class="p-2 ml-2 text-sm border-gray-400 border-2 rounded"
              type="text" 
              v-model.lazy="value" 
            />
          </div>
          <div class="flex items-center mb-2">
            <div class="flex-1">.number</div>
            <input
              class="p-2 ml-2 text-sm border-gray-400 border-2 rounded"
              type="text" 
              v-model.number="value" 
            />
          </div>
          <div class="flex items-center mb-2">
            <div class="flex-1">.trim</div>
            <input
              class="p-2 ml-2 text-sm border-gray-400 border-2 rounded"
              type="text" 
              v-model.trim="value" 
            />
          </div>
          </panel>
        `
    })

    // 双向绑定 v-model  练习
    const ModelDemo = defineComponent({
      components: {
        panel: Panel,
        't-button': TButton
      },
      data: () => ({
        content: '',
        data: [
          {
            id: 1,
            content: 'ajkjaljalj'
          }
        ]
      }),
      methods: {
        delItem(id) {
          for (var i = 0; i < this.data.length; i++) {
            if (this.data[i].id === id) {
              this.data.splice(i, 1);
            }
          }
        },
        addItem() {
          if (!this.content.length) {
            alert("请输入内容")
            return
          }
          const item = {
            id: new Date().getTime(),
            content: this.content
          }
          this.data.push(item)
        }
      },
      template: `
      <panel title="我的微博">
        <textarea class="mb-2 border rounded" cols="30" rows="4" v-model="content"></textarea>
        <t-button @click="addItem">发布消息</t-button>
        <ul class="mt-4">
          <li class="mb-2"  v-for="item in data" :key="item.id">
            <p class="flex justify-between items-center bg-gray-200 p-2 rounded">
            <div class="">{{item.content}}</div>
            <t-button size="sm" @click="delItem(item.id)">x</t-button></p>  
          </li>
        </ul>
      </panel>
      `
    })

    // 自定义指令
    const CustomDirectives = defineComponent({
      components: {
        panel: Panel
      },
      template: `
        <panel title="自定义指令">
          <p v-color:red class="p-2 mb-2 rounded bg-gray-200">Lorem ipsum dolor sit ame</p>
          <p v-highlight="'yellow'" class="p-2 mb-2 rounded bg-gray-200">Lorem ipsum dolor sit ame</p>
          <input v-focus class="p-2"  />
        </panel>
      `
    })

    // 过滤器
    const CustomDirectives = defineComponent({
      components: {
        panel: Panel
      },
      template: `
        <panel title="自定义指令">
          <p v-color:red class="p-2 mb-2 rounded bg-gray-200">Lorem ipsum dolor sit ame</p>
          <p v-highlight="'yellow'" class="p-2 mb-2 rounded bg-gray-200">Lorem ipsum dolor sit ame</p>
          <input v-focus class="p-2"  />
        </panel>
      `
    })

    // 根组件
    const App = defineComponent({
      components: {
        model: Model,
        'model-demo': ModelDemo,
        'custom-directives': CustomDirectives
      },
      data: () => ({
        msg: '🍣 Vue Day 3',
      }),
    })


    const app = createApp(App)

    app.directive('color', {
      // bind -> beforeMount in Vue3.x
      beforeMount(el, obj) {
        el.style.color = obj.arg
      },
    })

    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })

    app.directive('highlight', {
      beforeMount(el, binding, vnode) {
        el.style.background = binding.value
      }
    })

    app.mount('#app')
  </script>
</body>
</html>
